<template>
  <div class="page">
    <div class="topline1">
        <img src="../../assets/img/logo.png" alt="">
        <div class="putbox">
            <input type="text">
            <div class="iconfont icon-sousuo"></div>
        </div>
        <div class="right">
<div class="workbox">
            <div class="itemwork">
                <div class="yuan">
                    <div class="iconfont icon-diannao"></div>
                </div>
                工作台
            </div>
             <div class="itemwork">
                <div class="yuan">
                    <div class="iconfont icon-zhuanfa"></div>
                </div>
                转到<div class="iconfont icon-xiasanjiao"></div>
            </div>
                <div class="itemwork">
                <div class="yuan">
                    <div class="iconfont icon-geren1"></div>
                </div>
                在线客服
            </div>
                   <div class="itemwork">
                <div class="yuan">
                    <div class="iconfont icon-caidanshezhi"></div>
                </div>
                更多<div class="iconfont icon-xiasanjiao"></div>
            </div>
                        <div class="itemwork">
                <div class="yuan out">
                    <div class="iconfont icon-power-full"></div>
                </div>
                退出
            </div>

        </div>
        <div class="title">尊敬的江苏知己新能源科技有限公司（客户好：JS32000009178673301）  <div class="name">陈璐</div> ，您好！ <div class="iconfont icon-helps"></div></div>
        </div>
        
    </div>
    <div class="menubox">
        <div class="leftmenu">
            <div class="itemmenu" :class="menuindex==0?'active':''" @click="menuindex=0">
               首页
            </div>
              <div class="itemmenu" :class="menuindex==1?'active':''" @click="menuindex=1">
               账户查询
            </div>
              <div class="itemmenu" :class="menuindex==2?'active':''" @click="menuindex=2">
               转账业务
            </div>
              <div class="itemmenu" :class="menuindex==3?'active':''" @click="menuindex=3">
               现金管理
            </div>
              <div class="itemmenu" :class="menuindex==4?'active':''" @click="menuindex=4">
               缴费业务
            </div>
              <div class="itemmenu" :class="menuindex==5?'active':''" @click="menuindex=5">
               票据业务
            </div>
              <div class="itemmenu" :class="menuindex==6?'active':''" @click="menuindex=6">
               国际业务
            </div>
              <div class="itemmenu" :class="menuindex==7?'active':''" @click="menuindex=7">
               信贷融资
            </div>

        </div>
        <div class="rightmenu">
            <div class="rightitem" @click="menushow=true">
              <div class="iconfont icon-24gf-playSquare"></div>
              展开
            </div>
            <div class="btbtbt">
                <div class="iconfont icon-caidan1"></div>
            </div>
            
        </div>
    </div>
        <div class="menubox" v-show="menushow">
        <div class="leftmenu">
            <div class="itemmenu" :class="menuindex==8?'active':''" @click="menuindex=8">
               投资理财
            </div>
              <div class="itemmenu" :class="menuindex==9?'active':''" @click="menuindex=9">
               电子商务
            </div>
              <div class="itemmenu" :class="menuindex==10?'active':''" @click="menuindex=10">
               财政社保
            </div>
              <div class="itemmenu" :class="menuindex==11?'active':''" @click="menuindex=11">
               卡类业务
            </div>
              <div class="itemmenu" :class="menuindex==12?'active':''" @click="menuindex=12">
               服务管理
            </div>
              <div class="itemmenu" :class="menuindex==13?'active':''" @click="menuindex=13">
               特色业务
            </div>
              <div class="itemmenu" :class="menuindex==14?'active':''" @click="menuindex=14">
               增值服务
            </div>
              <div class="itemmenu" :class="menuindex==15?'active':''" @click="menuindex=15">
               云档案
            </div>

        </div>
  
    </div>
           <div class="menubox"  v-if="menushow">
        <div class="leftmenu" style="justify-content: flex-start;">
            <div class="itemmenu" :class="menuindex==16?'active':''" @click="menuindex=16">
               外汇专区
            </div>
              <div class="itemmenu" :class="menuindex==17?'active':''" @click="menuindex=17">
               科技金融专区
            </div>
              <div class="itemmenu" :class="menuindex==18?'active':''" @click="menuindex=18">
               薪享通
            </div>
       

        </div>
  
    </div>
    <div class="selectline" v-if="menuindex==1">
   <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    账户信息查询<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="9">活期账户</el-dropdown-item>
    <el-dropdown-item>定期账户</el-dropdown-item>
    <el-dropdown-item>银行内部账户</el-dropdown-item>
    <el-dropdown-item >一户通</el-dropdown-item>
    <el-dropdown-item >财资账户</el-dropdown-item>
     <el-dropdown-item >透支账户</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
  <div class="el-dropdown-link">批量账户查询</div>
   <div class="el-dropdown-link">电子回单查询</div>
    <div class="el-dropdown-link">集成资讯<i class="el-icon-arrow-down el-icon--right"></i></div>
       <div class="el-dropdown-link">电子对账<i class="el-icon-arrow-down el-icon--right"></i></div>
        <div class="el-dropdown-link">操作指南</div>
   <div class="el-dropdown-link">明细清单</div>

    </div>
    <div class="homecontent">
        <router-view></router-view>
       
    </div>
    <div class="profootbox">
        <div class="footleft">
           <img src="../../assets/img/f2.png" alt="">
           <div class="conbox">
            <div class="line1">
                 © 版权所有中国建设银行  京ICP备13030780号  京公网安备：110102000450
            </div>
               <div class="line1">
                总行地址：中国北京西城区金融大街25号  邮编：100033
            </div>
            <div class="tousu">投诉指南>></div>
           </div>
        </div>
        <div class="footright">
            <img src="../../assets/img/erweima.png" alt="">
             <img src="../../assets/img/erweima.png" alt="">
        </div>
    </div>
  </div>
</template>

<script>

export default {
data(){
    return{
        menuindex:0,
        menushow:false,
        showhuoqi:'',
        mingxishow:'',
    }
},
components:{
   
},
methods:{
     handleCommand() {
  this.$router.push({
    path:'/getMenuInfo/huoqi'
  })
  },
  changhuoqi(e){
    console.log(e)
    this.showhuoqi=e
  },
}
}
</script>

<style lang='less' scoped>
.page{
    width:100%;
    background: #F7F7F7;
    .topline1{
          margin: auto;
        width: 66%;
      background: white;
        height: 3.5rem;
      
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.4rem 0.5rem;
        .putbox{
            display: flex;
            align-items: center;
            height: 1.6rem;
            border-radius: 0.8rem;
            background: #F3F3F3;
            padding: 0.1rem 0.3rem;
            margin:  0 0 0 7rem;
            input{
                outline: none;
                border: 0;
                background: #F3F3F3;
            }
            .iconfont{
                color: grey;
            }

        }
        .right{
            flex: 1;
            margin-left: 3rem;
           
          
        
.workbox{
            display: flex;
            align-items: center;
            justify-content: flex-end;
            background: #fafafa;
            margin-bottom: .2rem;
            .itemwork{
                display: flex;
                align-items: center;
                font-size: 0.65rem;
                margin-right: .9rem;
                .yuan{
                    width: 1.4rem;
                    height: 1.4rem;
                    border-radius: 50%;
                    background: #268BCC;
                    color: white;
                    text-align: center;
                    line-height: 1.4rem;
                    margin-right: 0.1rem;
                }
                .out{
                    background:#B8140D;
                    .iconfont{
                        font-size: 0.75rem;
                    }

                }
                .icon-xiasanjiao{
                    font-size: 0.5rem;
                }
                
            }
        }
        .title{
            font-size: 0.7rem;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .name{
                font-weight: bold;
            }
            .iconfont{
                font-size: 0.6rem;
                border-radius: 50%;
                color: gray;
            }
        }
        }
        
    }
    .menubox{
        width: 66%;
        margin: auto;
        background: #2391D6;
        color: white;
        text-align: center;
        box-sizing: border-box;
        line-height:2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .leftmenu{
            width: 70%;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            box-sizing: border-box;
            .itemmenu{
                width: 12.5%;
                text-align: center;
                font-size: 0.8rem;
                cursor: pointer;
                
                box-sizing: border-box;
               
                &.active{
                    border-top: 2px solid #2391D6;
                    border-left: 1px solid #2391D6;
                    border-right: 1px solid #2391D6;
                    background: white;
                    color: #2391D6;
                }   

            }
        }
        .rightmenu{
            width: 9%;
            margin-left: 10%;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            .rightitem{
                display: flex;
                align-items: center;
                font-size: 0.8rem;
                cursor: pointer;
                .iconfont{
                    margin-right: .2rem;
                }
                
            }
            .btbtbt{
                width: 2.2rem;
                height: 2.2rem;
                text-align: center;
                line-height: 2.2rem;
                box-shadow: 0 1px 1px 0 rgb(0, 0, 0);
                background: linear-gradient(to top,#DCDCDC,#F9F9F9);
                .iconfont{
                    color: #2391D6;
                    font-weight: bold;
                }
                
            }
        }
       
        
    }
    .selectline{
          width: 66%;
        margin: auto;
         box-sizing: border-box;
        color: #2192D4;
        text-align: center;
        line-height:2rem;
        height: 2rem;
        display: flex;
        align-items: center;
       
        background: white;
        padding: 0.1rem 0.5rem;
        .el-dropdown-link{
            text-align: center;
              line-height:2rem;
        height: 2rem;
            color: #2192D4;
            cursor: pointer;
            font-weight: bold;
            margin-right: 4rem;
            font-size: 0.8rem;
        }
        /deep/li{
            color: #2192D4 !important; 
        }
    /deep/.el-dropdown-menu__item{
 color: #2192D4 !important;
        }
    }
    .homecontent{
        width: 66%;
        margin: auto;
       
       
    }
    .profootbox{
        width: 66%;
        margin: auto;
        background: #EEEEEE;
        box-sizing: border-box;
        padding: 1rem 0.6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .footleft{
            display: flex;
            align-items: center;
            img{
                margin-right: 0.2rem;
            }
            .line1{
                font-size: 0.9rem;
            }
            .tousu{
                color: #2192D4;
            }
        }
        .footright{
            width: 18%;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            img{
                width: 5rem;
                height: 5rem;
            }
        }


    }

}
</style>